<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台管理</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">绘本馆管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">绘本管理</a></li>
                <li><a href="user-manage.html">客户管理</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div>
    </div>
</nav>

<div class="container well" id="app">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        添加绘本
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">绘本添加</h4>
                </div>
                <!--模态框-->
                <div class="modal-body">
                        <div class="form-group">
                            <input v-model="book.isbn" type="text" class="form-control" name="isbn" placeholder="绘本编号">
                        </div>
                        <div class="form-group">
                            <input v-model="book.title" type="text" class="form-control" name="title" placeholder="绘本名称">
                        </div>
                        <div class="form-group">
                            <input v-model="book.author" type="text" class="form-control" name="author" placeholder="绘本作者">
                        </div>
                        <div class="form-group">
                            <input v-model="book.price" type="text" class="form-control" name="price" placeholder="绘本价格">
                        </div>
                        <div class="form-group">
                            <input v-model="book.publisher" type="text" class="form-control" name="publisher" placeholder="出版社名称">
                        </div>
                        <div class="form-group">
                            <input v-model="book.copy" type="text" class="form-control" name="copy" placeholder="现余存货">
                        </div>

                        <div class="form-group">
                            <template>
                                <div class="block">
                                    <el-date-picker
                                            v-model="book.publishtime"
                                            type="date"
                                            placeholder="选择绘本出版日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </div>
                        <div class="form-group">
                            <template>
                                <el-select name="category" v-model="book.category.id" placeholder="绘本种类">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <div class="form-group">
                            <input v-model="book.createby" type="text" class="form-control" name="createtime" placeholder="绘本添加者">
                        </div>
                        <template>
                            <div class="block form-group" style="width: 100%">
                                <el-date-picker
                                        v-model="book.createtime"
                                        type="datetime"
                                        name="createtime"
                                        placeholder="请选择绘本添加时间">
                                </el-date-picker>
                            </div>
                        </template>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" @click="insert()">添加</button>
                        </div>
                </div>

            </div>
        </div>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th>序号</th>
            <th>ISBN</th>
            <th>绘本名称</th>
            <th>作者</th>
            <th>份数</th>
            <th>类型</th>
        </tr>
        </thead>
        <tbody>
            <template v-for="book in books">
                <tr>
                    <td>{{book.id}}</td>
                    <td>{{book.isbn}}</td>
                    <td>{{book.title}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.copy}}</td>
                    <td>{{book.category.name}}</td>
                    <td><el-button type="primary" data-toggle="modal" data-target="#myModal">修改</el-button></td>
                    <td><el-button type="danger" @click="del(book.id)">删除</el-button></td>
                </tr>
            </template>
        </tbody>
    </table>
</div>

<script>
    new Vue(
        {
            el: '#app',
            data(){
                return{
                    books:[],
                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    value1: '',
                    options: [{
                        value: '1',
                        label: '神话'
                    }, {
                        value: '2',
                        label: '科学'
                    }, {
                        value: '3',
                        label: '童话'
                    }, {
                        value: '4',
                        label: '自然'
                    }, {
                        value: '5',
                        label: '游戏'
                    },{
                        value: '6',
                        label: '美食'
                    }],
                    value: '',
                    book:{
                        isbn:'',
                        title:'',
                        author:'',
                        price:'',
                        publisher:'',
                        copy:'',
                        cover:'',
                        publishtime:'',
                        category:{
                            id:'',
                            name:''
                        },
                        createby:'',
                        createtime:''
                    }
                }
            },
            mounted: function () {
                var _this = this;
                axios.get('../api/book/findAll')
                    .then(function (response) {
                        _this.books = response.data.results;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            methods: {
                insert:function () {
                    var _this = this;
                    axios.post('../api/book/insert',_this.book)
                        .then(function (response) {
                            if (response.data.code == 2001){
                                window.location.href="admin-index.html";
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                del:function (_id){
                    var _this = this;
                    axios.delete('../api/book/delete?id='+_id)
                        .then(function (response) {
                            if (response.data.code == 2001){
                                window.location.href="admin-index.html";
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });
</script>
</body>
</html>